<template>
    <div class="main">
      <span class="title">在线订餐系统</span>
      <div class="setting">
        <setting></setting>
      </div>
      <div class="weather">
        <weather></weather>
      </div>
       <span class="time">{{newTime}}</span>
    </div>
</template>
<script>
import setting from '../components/Setup.vue'
import weather from '../views/admin/Weather.vue'
export default {
  name: 'MyHeader',
  components: {
    setting,
    weather
  },
  created () {
    // this.getWeather() // 获取天气
  },
  methods: {
    getNowTime () {
      const date = new Date()
      const time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日   ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
      this.newTime = time
    },
    addZero (s) {
      return s < 10 ? ('0' + s) : s
    }
  },
  mounted () {
    this.getNowTime()
    // eslint-disable-next-line no-use-before-define
    clearInterval(myTimeDisplay)
    // eslint-disable-next-line no-var
    var myTimeDisplay = setInterval(() => {
      this.getNowTime()
    }, 1000)
  },
  data () {
    return {
      weather: '',
      lower: '',
      higher: '',
      newTime: '',
      stop: true
    }
  }
}
</script>
<style scoped>
.main{
  width: 99vh;
  height: 50px;
}
.title{
  font-size: 15px;
  color: white;
 position: absolute;
 left: 10px;
}
.time{
  width: 200px;
  margin-top: -50px;
  font-size: 17px;
  position: absolute;
  right: 10%;
}
.setting{
  position: absolute;
  right: 20px;
}
.weather{
width: 50px;
height: 50px;
margin-left: 60%
}
  </style>
